<template>
  <view>
    <!-- 科目选择和拍照按钮 -->
    <view class="subject-box">
      <view class="flex-1">
        <text class="subject-item" v-for="item in subjectList" :key="item.id"
          :class="{ active: currentSubject === item.id }" @click="currentSubject = item.id">
          <text>{{ item.name }}</text>
        </text>
      </view>
      <view @click="toTakePhoto">
        <image src="/static/image/teacher/icon-classrrom-camera.png" mode="aspectFit"
          style="width: 48rpx; height: 48rpx;"></image>
      </view>
    </view>

    <!-- 错题列表 -->
    <view class="wrong-question-list">
      <view class="wrong-question-item" v-for="(item, index) in wrongQuestionList" :key="item.id">
        <view class="flex justify-between align-center">
          <view class="flex-1">
            <u-text bold color="#333" size="32rpx" :text="`错题${index + 1}`"></u-text>
          </view>
          <view>
            <u-icon size="22" color="#666" name="/static/icon/icon-trash.png"
              @click="todoDeleteWrongQuestion(item)"></u-icon>
          </view>
        </view>
        <view class="margin-top-sm">
          <image :src="item.url" mode="aspectFit" style="width: 100%;"></image>
        </view>
        <view class="margin-top-sm">
          <u-text color="#333" size="24rpx" text="知识点 正在加载中" v-if="item.knowledge.length === 0"></u-text>
          <template v-else>
            <view v-for="(knowledge, index) in item.knowledge" :key="knowledge.id">
              <u-text margin="20rpx 0 0 0" color="#333" size="28rpx" :text="`知识点${index + 1}`"></u-text>
              <view class="knowledge-item">
                <view>
                  <u-text color="#333" size="28rpx" :text="knowledge.name"
                    v-if="currentKnowledge?.id !== knowledge.id"></u-text>
                  <u-input :focus="true" customStyle="background:white;height:60rpx" v-model="knowledge.name"
                    placeholder="请输入知识点名称" v-else />
                </view>
                <view class="flex align-center gap-sm">
                  <u-icon size="24" color="#999" name="edit-pen" @click="handleEditKnowledge(knowledge)"
                    v-if="currentKnowledge?.id !== knowledge.id"></u-icon>
                  <u-icon size="24" color="#999" name="checkmark" @click="handleSaveKnowledge(knowledge)"
                    v-else></u-icon>
                  <u-icon size="18" color="#999" name="/static/icon/icon-trash.png"
                    @click="todoDeleteKnowledge(knowledge)"></u-icon>
                </view>
              </view>
            </view>
          </template>
        </view>
        <view class="btn-add-knowledge" v-if="item.knowledge.length" @click="handleSaveWrongQuestion">
          <u-icon size="26rpx" color="#0060E6" name="plus"></u-icon>
          <text>新增知识点</text>
        </view>
      </view>

    </view>

    <u-modal :show="showDeleteKnowledgeModal" title="删除知识点" :showCancelButton="true" @confirm="handleDeleteKnowledge"
      @cancel="handleCancelDeleteKnowledge">
    </u-modal>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import { useTheme } from '@/composables/useTheme';

const { themePrimary, themeSecondary } = useTheme();
const currentSubject = ref(1);//当前科目
const currentEditKnowledge = ref(null);//当前编辑知识点
const currentDeleteKnowledge = ref(null);//当前删除知识点
const currentWrongQuestion = ref(null);//当前错题
//删除知识点确认弹窗
const showDeleteKnowledgeModal = ref(false);
//科目列表
const subjectList = ref([
  {
    id: 1,
    name: '语文'
  },
  {
    id: 2,
    name: '数学'
  },
  {
    id: 3,
    name: '英语'
  }
]);
//错题列表
const wrongQuestionList = ref([
  {
    id: 1,
    url: '/static/image/img-math-bg.png',
    knowledge: [{
      id: 1,
      name: '10以内加减法',
    }, {
      id: 2,
      name: '10以内加减法',
    }, {
      id: 3,
      name: '10以内加减法',
    }],
  },
  {
    id: 2,
    url: '/static/image/img-math-bg.png',
    knowledge: [],
  }
]);

//删除错题
const todoDeleteWrongQuestion = (wrongQuestion) => {
  showDeleteKnowledgeModal.value = true;
  currentWrongQuestion.value = wrongQuestion;
}

//编辑知识点
const handleEditKnowledge = (knowledge) => {
  currentEditKnowledge.value = knowledge;
}

//删除知识点
const todoDeleteKnowledge = (knowledge) => {
  showDeleteKnowledgeModal.value = true;
  currentDeleteKnowledge.value = knowledge;
}

//取消删除知识点
const handleCancelDeleteKnowledge = () => {
  showDeleteKnowledgeModal.value = false;
  currentDeleteKnowledge.value = null;
}

//删除知识点
const handleDeleteKnowledge = () => {
  wrongQuestionList.value = wrongQuestionList.value.filter(item => item.id !== currentDeleteKnowledge.value.id);
  showDeleteKnowledgeModal.value = false;
  currentDeleteKnowledge.value = null;
}

//保存知识点
const handleSaveKnowledge = () => {
  wrongQuestionList.value = wrongQuestionList.value.map(item => {
    if (item.id === currentEditKnowledge.value.id) {
      return currentEditKnowledge.value;
    }
    return item;
  });
  currentEditKnowledge.value = null;
}

const toTakePhoto = () => {
  uni.navigateTo({
    url: `/pages/common/camera/index?id=${currentSubject.value}`
  });
}
</script>
<style scoped lang="scss">
.subject-box {
  background: white;
  padding: 20rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: solid 1px #eee;
}

.wrong-question-list {
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 20rpx;
}

.wrong-question-item {
  background: white;
  border-radius: 32rpx;
  margin-bottom: 30rpx;
  padding: 30rpx;
}

.subject-item {
  padding: 10rpx 20rpx;
  border-radius: 50rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #666;

  &.active {
    background: #0060E6;
    color: white;
  }
}

.knowledge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7f7f7;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-top: 20rpx;
}

.btn-add-knowledge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EBF3FF;
  border-radius: 50rpx;
  padding: 20rpx;
  margin-top: 40rpx;
  color: #0060E6;
  gap: 10rpx;
}
</style>